<script setup>
import { ref } from "vue";
import { get } from '@/request/request';
import { onShow } from "@dcloudio/uni-app";

const orderList = ref({
  page: 1,
  pageSize: 10
})
const orderListData = ref({})

onShow(() => {
  OrderList()
})

const OrderList = () => {
  get('/order_list', orderList.value, { "sessionKey": uni.getStorageSync("sessionKey") }).then(res => {
    console.log('订单列表', res.data.list);
    orderListData.value = res.data.list;
  })
}
</script>

<template>
  <view class="user-orders">
    <template v-for="(item, index) in orderListData" :key="index">
      <view class="order-box">
        <view style="padding: 25rpx;">
          <view style="font-size: 28rpx;color: rgba(0, 0, 0, 0.9);">订单号：{{ item.sn }}</view>
          <view style="font-size: 32rpx;font-weight: 600;margin-top: 10rpx;">{{ item.countyName }}：{{ item.courseName }}
          </view>
          <view style="display: flex;margin-top: 10rpx;height: 44rpx;align-items: center;">
            <image style="width: 28rpx;height: 28rpx;" src="/static/user/Calendar.svg" />
            <view style="margin: 10rpx;font-size: 28rpx;color: rgba(0, 0, 0, 0.6);">{{ item.totalTime }}小时课</view>
          </view>
          <view style="margin-top: 10rpx;">暂时未开放</view>
          <view style="margin-top: 10rpx;">暂时未开放</view>
          <view style="margin-top: 10rpx;">暂时未开放</view>
        </view>
      </view>
    </template>
  </view>
</template>


<style scoped lang="scss">
.user-orders {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .order-box {
    margin: 20rpx;
    width: 686rpx;
    background: #FFF;
    border-radius: 24rpx;
    padding-bottom: 20rpx;
  }

}
</style>
